<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="项目搜索:">
						<el-input v-model="state.tableData.param.keyWords" placeholder="请输入项目名称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getTableData()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="addCategory('add',{})">
							<el-icon>
								<ele-Plus />
							</el-icon> 新建项目
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData.data" ref="goodTableRef" v-loading="state.tableData.loading">
						<el-table-column label="ID" width="80">
							<template #default="scope">
								<span>{{ scope.row.ID }}</span>
							</template>
						</el-table-column>
						<el-table-column label="项目名称" >
							<template #default="scope">
								<span>{{ scope.row.ProjectName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="项目图标" align="center">
							<template #default="scope">
								<div style="display: flex;justify-content:center;align-items: center;">
									<el-image class="ml15" style="width:32px;height: 32px;" :src="scope.row.Image"
										fit="cover" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="来源" >
							<template #default="scope">
								<span>--</span>
							</template>
						</el-table-column>
						<el-table-column label="创建人" >
							<template #default="scope">
								<span>--</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" >
							<template #default="scope">
								<span>{{ scope.row.AddTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<el-switch @click="changeStatusFun('sku',scope.row)" v-model="scope.row.onSelf"  :active-value=1 :inactive-value=0 />
							</template>
						</el-table-column>
						<el-table-column label="操作" width="260">
							<template #default="scope">
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="navFun(scope.row)"> 导航列表 </span>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="navFun(scope.row)"> 数据库设计 </span>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="addCategory('edit',scope.row.data)"> 编辑 </span>
								<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="deleteHandle(scope.$index,scope.row)"> 删除 </span>
							</template>
						</el-table-column>
					</el-table>
				</section>
			</el-card>
		</div>
		<addCategoryDialog ref="addCategoryDialogRef" @refresh="getCategoryList()" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { useRouter } from 'vue-router';
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { productCategoryList ,delProject } from "/@/api/commodity";
const router = useRouter();
const addCategoryDialog = defineAsyncComponent(() => import('/@/views/home/components/addCategoryDialog.vue'));

// 定义变量内容
const addCategoryDialogRef = ref();
const state = reactive({
	param: {
		type: 0,
		name: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});
const navFun = (row ?: Object) => {
	router.push({
		path: '/home/nav',
		query: { param: row.ID },
	});
};
	

// 获取商品列表
const getTableData = async () => {
	state.tableData.loading = true;
	let params = {
		pageIndex: state.tableData.param.pageNum,
		pageSize: state.tableData.param.pageSize,
	}
	const results = await productCategoryList(params);
	state.tableData.loading = false;
	state.tableData.data = results.data.Data;
	state.tableData.loading = false
}

// 打开新增编辑分类弹窗
const addCategory = (type: string, row ?: Object) => {
	addCategoryDialogRef.value.openDialog(type, state.param.type, JSON.parse(JSON.stringify(row)));
};

// 删除规格
const onRowDel =  (row : any) => {
	ElMessageBox.confirm(`此操作将永久删除该规格项，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
		state.tableData.loading = true;
		const { results } = await specificationDelete(row.id);
		console.log(results);
		state.tableData.loading = false;
		ElMessage.success('删除成功');
		getTableData();
	}).catch(() => {});
};

// 项目启用禁用操作
const changeStatusFun = async(type:string,obj: any) => {
	let params = {};
	if(type=="spu"){
		params = {
			spuId: obj.spuId,
			onSelf: obj.onSelf
		}
	}else if(type=="sku"){
		params = {
			skuId: obj.skuId,
			onSelf: obj.onSelf
		}
	}
	const { method } = await productChangeOnSelf(params);
	if(method == 'success'){
		ElMessage.success('修改成功');
		getGoodsList();
	}
};

const deleteHandle = (index: number,row: any) => {
	ElMessageBox.confirm( '确定删除该项目?','提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	} ).then( async () => {
		const ok  = await delProject({ID:row.ID});
		state.tableData.data.splice(index,1)
		return ElMessage.success('删除成功');
	}).catch(() => {
	
	})
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>

